<template>
	<view class="DetailsBox" :style="{ '--color': color }">
		<status-bar title="详情" hideBg="1" :back="back"></status-bar>

		<view class="Onfo">
			<image :src="$imgUrls(site_time.img)" mode="aspectFill" class="Img"></image>
			<view class="TxtOnfo">
				<text class="black size30">{{ site_time.name }}</text>
				<text class="Time">购买时间：{{ info.add_time }}</text>
				<text class="Time">开宴时间：{{ site_time.open_date_time }}</text>
			</view>
			<text class="Waiting stateTXT a-self-start" v-if="info.state == 1">待使用</text>
			<!-- <text
				class="color_ff4 stateTXT a-self-start"
				v-if="info.state == 3 && info.tail_price != 0"
				>待付尾款</text
			> -->
			<text
				class="color_ff4 stateTXT a-self-start"
				v-if="info.state == 3 && info.tail_price == 0"
				>待核销</text
			>
			<text class="used stateTXT a-self-start" v-if="info.state == 2">已使用</text>
			<text class="expiredbg stateTXT a-self-start" v-if="info.state == 4">已过期</text>
			<text class="expiredbg stateTXT a-self-start" v-if="info.state == 5">已退款</text>
			<text class="expiredbg stateTXT a-self-start" v-if="info.state == 6">退款中</text>
		</view>

		<view class="content">
			<view class="black size30">预约信息</view>
			<view class="List">
				<text class="title">预约单号</text>
				<text class="title">{{ info.scan_order_code }}</text>
			</view>
			<view class="List">
				<text class="title">预约日期</text>
				<text class="title">{{ info.add_time }}</text>
			</view>
			<view class="List">
				<text class="title">联系人</text>
				<text class="title">{{ info.user_name }}</text>
			</view>
			<view class="List">
				<text class="title">联系电话</text>
				<text class="title">{{ info.user_tel }}</text>
			</view>
			<view class="row j-sb a-center m-top40">
				<view class="contact" @click="$common.Tel(pageData.service_tel)">
					<view class="iconfont icon-kefu color_99 size60"></view>
					<view class="d-flex f-column CallInfo">
						<text class="CallInfo">客服热线</text>
						<text class="CallInfo">{{ pageData.service_tel }}</text>
					</view>
				</view>
				<view class="contact" @click="Refund = true">
					<view class="iconfont icon-shouye color_99 size60"></view>
					<view class="d-flex f-column CallInfo">
						<text class="CallInfo">全额退款</text>
						<text class="CallInfo">开宴前{{ site_time.cancel_hour }}小时</text>
					</view>
				</view>
			</view>
		</view>

		<view class="banquet">
			<view class="black size30 p-left20">座席信息</view>
			<view class="banList bot" v-for="(item, index) in info.sites_detail" :key="index">
				<view class="Bnakine">{{ item.type_name }}-{{ item.name }}</view>
				<view class="bnaid">
					<text class="title">{{ item.goods.name }}</text>
					<text class="title" v-if="info.state != 3">￥{{ item.site_price }}</text>
					<text class="title" v-else>定金：￥{{ item.order_price }}</text>
				</view>
				<view class="bnaid" v-if="item.make_up_price">
					<view class="d-flex a-center">
						<text class="title">摄影预约</text>
						<text class="title m-left20">{{ item.make_up_date_str }}</text>
					</view>
					<text class="title">￥{{ item.make_up_price }}</text>
				</view>
			</view>
		</view>

		<!-- <view class="favorable" v-if="info.num > 0">
			<view class="black size30 p-left20">优惠抵扣</view>
			<view class="PriceList">
				<view class="bnaid">
					<text class="title">美团劵</text>
					<text class="title">X{{ info.num }}</text>
				</view>
			</view>
		</view> -->

		<view class="PriceInfo">
			<view class="black size30 p-left20">支付信息</view>
			<view class="PriceList">
				<view class="bnaid">
					<text class="title">定金</text>
					<text class="title">￥{{ info.order_price }}</text>
				</view>
				<view class="bnaid" v-if="info.state != 3">
					<text class="title">妆造价格</text>
					<text class="title">￥{{ info.make_up_price }}</text>
				</view>
				<!-- <view class="bnaid" v-if="info.tail_price > 0">
					<text class="title">{{ Copewith }}尾款</text>
					<text class="title">￥{{ info.tail_price }}</text>
				</view> -->
				<view class="bnaid" v-if="info.state != 3">
					<text class="title">支付价格</text>
					<text class="title">￥{{ info.payment }}</text>
				</view>
				<view class="bnaid" v-if="info.need_refuse_money && info.need_refuse_money > 0">
					<text class="color_ff2 size26">应退定金</text>
					<text class="color_ff2 size26">￥{{ info.need_refuse_money }}</text>
				</view>
			</view>
		</view>

		<view class="row j-centert m-top50" v-if="info.state == 1 || info.state == 3">
			<!-- <view
				class="botBtn flexac f-column"
				v-if="info.state == 3 && info.tail_price != 0"
				@click="finalPayment">
				<text class="h6">￥{{ info.tail_price }}</text>
				<view class="h6">支付尾款</view>
			</view> -->
			<view class="botBtn flexac size30" @click="show = true">核销码</view>
		</view>

		<u-popup
			:show="show"
			@close="show = false"
			mode="center"
			round="5"
			:duration="200"
			:safeAreaInsetBottom="false">
			<view class="Upopup">
				<text class="Utitle">莅临现场并出示给工作人员</text>
				<image :src="$imgUrls(info.qr_code)" class="Ucode"></image>
				<text class="Uorder">{{ info.scan_order_code }}</text>
				<!-- <block v-if="info.state == 3 && info.tail_price != 0">
					<text class="color_ff4 size30 m-top20"
						>需要支付尾款 ￥{{ info.tail_price }}</text
					>
					<view class="Ubtn" @click.stop="finalPayment">立即支付</view>
				</block> -->
			</view>
		</u-popup>

		<u-popup
			:show="Refund"
			@close="Refund = false"
			mode="bottom"
			round="10"
			closeable
			:duration="200">
			<view class="RefundBox">
				<view class="row j-centert black size30">全额退款说明</view>
				<view class="rows m-top30">
					<u-parse :content="pageData.refuse_desc" :domain="imgUrl"></u-parse>
				</view>

				<view
					class="row j-sb p-left30 p-right30 m-top50"
					v-if="info.state == 1 || info.state == 3">
					<view class="botBtn flexac size30" @click="refuseOrder">确定退款</view>
					<view class="botBtn Cancel flexac size30" @click.stop="Refund = false"
						>取消</view
					>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				color: '#d7b06d',
				show: false,
				Refund: false,
				order_id: '',
				pageData: '',
				info: '',
				site_time: '',
				downTime: null,
			};
		},
		onLoad(opt) {
			if (opt.id) this.order_id = opt.id;
			this.getLockOrder();
		},
		onShow() {
			// #ifdef MP-WEIXIN
			let that = this;
			let options = wx.getEnterOptionsSync();
			if (options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3') {
				let extraData = options.referrerInfo.extraData;
				if (!extraData) return;
				if (extraData.code == 'success') {
					that.getLockOrder();
				}
			}
			// #endif
			this.Refresh();
		},

		methods: {
			getLockOrder() {
				this.$http
					.get({
						url: '/SiteApi/getLockOrder',
						data: {
							order_id: this.order_id,
						},
					})
					.then((res) => {
						if (res.code != 200) return this.$Toast(res.msg, 2);
						const Result = res.data;
						this.pageData = Result;
						this.info = Result.info;
						this.site_time = Result.site_time;
					});
			},
			finalPayment() {
				let that = this;
				this.$showLoading('');
				this.$http
					.get({
						url: '/SiteApi/getTailPayInfo',
						data: {
							order_id: this.order_id,
						},
					})
					.then((res) => {
						this.$hideLoading();
						if (res.code != '100') return this.$Toast(res.msg);
						const Result = res.data;
						// #ifdef MP-WEIXIN
						if (Result.extraData) {
							wx.openEmbeddedMiniProgram({
								appId: Result.appId,
								extraData: Result.extraData,
							});
							return;
						}
						uni.getProvider({
							service: 'oauth',
							success: function (resp) {
								console.log(resp.provider);
								if (resp.provider) {
									uni.requestPayment({
										provider: resp.provider[0],
										orderInfo: Result,
										timeStamp: Result.timeStamp,
										nonceStr: Result.nonceStr,
										package: Result.package,
										signType: Result.signType,
										paySign: Result.paySign,
										success: function (resj) {
											that.getLockOrder();
										},
										fail: function (err) {
											console.log('fail:' + JSON.stringify(err));
										},
									});
								}
							},
						});
						// #endif
					});
			},
			refuseOrder() {
				this.Refund = false;
				this.$showLoading('');
				this.$http
					.post({
						url: '/SiteApi/refuseOrder',
						data: {
							id: this.order_id,
						},
					})
					.then((res) => {
						this.$hideLoading();
						if (res.code != 200) return this.$Toast(res.msg);
						this.$Toast(res.msg);
						this.getLockOrder();
					});
			},
			CloseTime() {
				clearInterval(this.downTime);
				this.downTime = null;
			},
			Refresh() {
				this.downTime = setInterval(() => {
					this.getLockOrder();
				}, 6000);
			},
		},
		computed: {
			Copewith() {
				return this.info.state == 3 ? '应付' : '';
			},
		},
		onHide() {
			this.CloseTime();
		},
		onUnload() {
			this.CloseTime();
		},
	};
</script>

<style>
	page {
		background-color: #f5ecda;
		padding-bottom: 40rpx;
	}
</style>
<style lang="scss" scoped>
	.DetailsBox {
		width: 100%;
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.Onfo {
		width: 690rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		padding-top: 20rpx;
	}
	.Img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}
	.TxtOnfo {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.Time {
		color: #999;
		font-size: 22rpx;
		margin-top: 8rpx;
	}
	.stateTXT {
		font-size: 28rpx;
		margin-left: 20rpx;
	}
	.Waiting {
		color: #009933;
	}
	.used {
		color: #333;
	}
	.expiredbg {
		color: #bcbcbc;
	}
	.content {
		width: 690rpx;
		margin: 24rpx auto 0;
		background-color: #ffffff;
		padding: 20rpx;
		border-radius: 10rpx;
	}
	.List {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 24rpx;
	}
	.title {
		color: #333;
		font-size: 26rpx;
	}
	.contact {
		display: flex;
		align-items: center;
	}
	.CallInfo {
		color: #333;
		font-size: 24rpx;
		margin-left: 10rpx;
	}
	.banquet {
		width: 690rpx;
		margin: 24rpx auto 0;
		background-color: #ffffff;
		padding: 20rpx 0;
		border-radius: 10rpx;
	}
	.banList {
		width: 100%;
		padding: 24rpx 20rpx 24rpx 20rpx;
	}
	.PriceList {
		width: 100%;
		padding: 10rpx 20rpx;
	}
	.Bnakine {
		padding: 4rpx 14rpx;
		background-color: #fff2de;
		border-radius: 8rpx;
		font-size: 24rpx;
		border: 1rpx solid var(--color);
		color: var(--color);
		display: inline-block;
	}
	.bnaid {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
		margin-top: 20rpx;
	}
	.PriceInfo {
		width: 690rpx;
		width: 690rpx;
		margin: 24rpx auto 0;
		background-color: #ffffff;
		padding: 20rpx 0;
		border-radius: 10rpx;
	}
	.botBtn {
		width: 240rpx;
		height: 76rpx;
		background-color: #d7b06d;
		border-radius: 8rpx;
		color: #fff;
		margin: 0 20rpx;
	}
	// .Cancel{
	// 	background-color: #f5ecda !important;
	// 	color:#999;
	// }
	.Upopup {
		width: 580rpx;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.Utitle {
		color: #000;
		font-size: 30rpx;
	}
	.Ucode {
		width: 480rpx;
		height: 480rpx;
		margin-top: 20rpx;
	}
	.Uorder {
		color: #000;
		font-size: 28rpx;
		margin-top: 20rpx;
	}
	.Ubtn {
		width: 240rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 28rpx;
		border-radius: 8rpx;
		background-color: #d7b06d;
		margin-top: 20rpx;
	}
	.RefundBox {
		width: 100%;
		padding: 50rpx 30rpx 50rpx 30rpx;
		display: flex;
		flex-direction: column;
	}
	.favorable {
		width: 690rpx;
		margin: 24rpx auto 0;
		background-color: #ffffff;
		padding: 20rpx 0;
		border-radius: 10rpx;
	}
</style>